精选分类

学习记录

3 篇文章

算法

5 篇文章

项目

5 篇文章

音视频开发

7 篇文章

计算机图形学

10 篇文章

文章列表

3.4k字3 分钟

地球可视化的项目制作完毕后，使用 chrome 的 lighthouse 检测性能后，结果如下。还有不少改进的地方。 # 一、图片压缩转格式 图片可以使用 tinyPNG 压缩，然后转为 webp 格式。能缩小体积。地球可视化用到了地球，太阳和星空的贴图原先加起来 1540kb 的图片，压缩后为 358kb，效果显著。 # 二、按需引入 路由懒加载。；路由中的组件可以动态引入，等要加载的时候再加载。 123component: function(){ return import('../watchEarth.vue')&
7.5k字7 分钟

# 一、环境贴图 ​ 贴图有两种分别为全景贴图天空盒贴图。 全景贴图免费获取： HDRI: Indoor • Poly Haven， HDRi Haven • Free CC0 HDRi Maps for Everyone (hdri-haven.com) 全景转天空盒： HDRI to CubeMap (matheowis.github.io) exr 转其他图片类型： Convertio — 文件转换器 天空盒 ​ 天空盒需要有六张贴图，分别对应上下左右前后。 1234567891011//天空盒const loader = new THREE.CubeT
4.3k字4 分钟

# 一、绘制地球 ​ 关于绘制地球，一开始是想找一张地球图片当做纹理绘制在球体上，之后想做用户通过鼠标选中国家并产生高光，想让纹理的一部分发光想不到怎么做，后面发现了 geojson。可以获取地球的 geojson 数据绘制一个地球。可以使用 echarts 绘制一个地球，然后使用 canvasTexture 贴在球上。至于如何选中国家，可以让用户的鼠标射出一条射线，然后与球体做碰撞检测，获取碰撞点，将点的空间坐标转化为经纬度，然后根据经纬度在 echarts 中获取对应的国家，在 echarts 中高亮，然后监听 echarts 渲染完成事件，再将地球的纹理换成 echarts 渲染完成的图
3.7k字3 分钟

# 一、Blinn-Phong 模型 ​ 在硬件还没有现在这么好的时候，想要完全模拟现实世界有点难，尤其是实时渲染。基于此便有了标准光模型。标准光都是经验模型，渲染出来的与现实世界有点差距，好就好在对硬件要求不高，硬件不好也能跑。在标准光模型中，人眼能看到的光分为三类，环境光，漫反射，高光反射。 # 1. 环境光 ​ 在现实世界中，有个只有一个点光源的黑暗空间照向一个物体，仍然能看到物体的背面，是因为光在照射物体后又反射到周围其他物体或者墙壁，之后在不断反射，反射到了物体上。而在标准光模型中，光照射到物体后有一次反射，之后就不管光之后的反射，光线追踪太耗费性能了，一直到 2018，英伟达才在
3.1k字3 分钟

# 一、光照 # 1. 光的可视化 12const lighthelper = new THREE.LightHelper(light) //light为创建的光scene.add(lighth) # 2. 环境光 ​ 环境光没有方向且无法产生阴影，添加进场景中，所有能受光照影响的材质都会有这个环境光。 12const ambientLight = new THREE.AmbientLight(color,intensity)//color为颜色，intensity为强度scene.add(ambientLight) # 3. 平行光
5.6k字5 分钟

# 一、纹理 3D TEXTURES | Free seamless PBR textures with Diffuse, Normal, Displacement, Occlusion and Roughness Maps.（纹理材质） # 1. 加载并使用纹理 1234567891011121314151617181920212223242526272829303132333435// const TextureLoader = new THREE.TextureLoader() //创建纹理加载器//加载纹理有三个回调
6.5k字6 分钟

# 一、Demo 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586<html lang="en"><head><meta charset="UTF-8"><meta name="viewport&qu
8.1k字7 分钟

# 一、相机 ​ 想要观察 3 维的世界，首先需要确定在哪里观察，这个哪里指的是相机的位置也即视点，此外还需要确定相机往那个方向拍照，为此需要确定观察点，将观察点与视点连线即可确定拍照的方向。最后还需要确定相机的朝向，是正着拍还是倒着拍，绕着 z 轴转了多少度，描述相机的朝向即上方向。当有了视线和上方向就可以对相机建系，另一个轴用视线叉乘上方向获得，由此就可以对相机建系。 ​ 当我们看一个物体时，这时我们向右移动相当于此时我们静止然后物体向左移动。如果有一个相机一开始在世界坐标系的原点，上方向为 y 轴，视线为 - z 轴，此时移动相机，假设这个移动包含平移和旋转，则可以使用一个四阶矩阵描述这
6.4k字6 分钟

# 一、旋转，平移，缩放 # 1. 二维旋转 直角坐标系 ​ 如下图，有一个长度为 l, 角度为 θ1 的向量逆时间旋转了 θ 度。设原先向量的横纵坐标为 x1 和 y1，旋转后的横纵左边为 x2 和 y2。 x1=cosθ1l,y1=cosθ1lx_1=cosθ_1l, y_1=cosθ_1l x1​=cosθ1​l,y1​=cosθ1​l x2=cos(θ+θ1)l=cosθcosθ1l−sinθsinθ1l=cosθx1−sinθy1x_2 = cos(θ+θ_1)l =
3.4k字3 分钟

# 一、纹理 ​ 通过片元着色器一个一个像素给模型添加颜色费时费力，一般都是使用纹理贴图将图片贴在模型表面。 着色器上的代码实现 1234567891011121314151617181920212223const vertexCode = ` attribute vec4 a_Position; //a_TexCoord接收纹理坐标,因为纹理是2维的所以使用vec2。 attribute vec2 a_TexCoord; //向片元着色器传递纹理坐标。 varying vec2 v_TexCoord;